<div class="container-fluid" style="padding:5px;">
  <div class="row">
    <div class="col-4">
      <form>
        <div class="form-group row">
          <label for="port" class="col-sm-2 col-form-label">端口：</label>
          <div class="col-sm-10">
            <nz-select style="width: 120px;" id="port" name="port" [compareWith]="compareFn" [(ngModel)]="openOption.port"
              nzAllowClear nzPlaceHolder="请选择端口">
              <nz-option *ngFor="let port of portsInfo" [nzValue]="port.comName" [nzLabel]="port.comName"></nz-option>
            </nz-select>
          </div>
        </div>
        <div class="form-group row">
          <label for="baudRate" class="col-sm-2 col-form-label">波特率</label>
          <div class="col-sm-10">
            <nz-select style="width: 120px;" id="baudRate" name="baudRate" [compareWith]="compareFn" [(ngModel)]="openOption.baudRate"
              nzAllowClear nzPlaceHolder="请选择波特率">
              <nz-option nzValue="110" nzLabel="110"></nz-option>
              <nz-option nzValue="300" nzLabel="300"></nz-option>
              <nz-option nzValue="1200" nzLabel="1200"></nz-option>
              <nz-option nzValue="2400" nzLabel="2400"></nz-option>
              <nz-option nzValue="4800" nzLabel="4800"></nz-option>
              <nz-option nzValue="9600" nzLabel="9600"></nz-option>
              <nz-option nzValue="14400" nzLabel="14400"></nz-option>
              <nz-option nzValue="19200" nzLabel="19200"></nz-option>
              <nz-option nzValue="38400" nzLabel="38400"></nz-option>
              <nz-option nzValue="57600" nzLabel="57600"></nz-option>
              <nz-option nzValue="115200" nzLabel="115200"></nz-option>
            </nz-select>
          </div>
        </div>
        <div class="form-group row">
          <label for="parity" class="col-sm-2 col-form-label">校验位</label>
          <div class="col-sm-10">
            <nz-select style="width: 120px;" id="parity" name="parity" [compareWith]="compareFn" [(ngModel)]="openOption.parity"
              nzAllowClear nzPlaceHolder="请选择校验位">
              <nz-option nzValue="none" nzLabel="none"></nz-option>
              <nz-option nzValue="even" nzLabel="even"></nz-option>
              <nz-option nzValue="mark" nzLabel="mark"></nz-option>
              <nz-option nzValue="odd" nzLabel="odd"></nz-option>
              <nz-option nzValue="space" nzLabel="space"></nz-option>
            </nz-select>
          </div>
        </div>
        <div class="form-group row">
          <label for="dataBits" class="col-sm-2 col-form-label">数据位</label>
          <div class="col-sm-10">
            <nz-select style="width: 120px;" id="dataBits" name="dataBits" [compareWith]="compareFn" [(ngModel)]="openOption.dataBits"
              nzAllowClear nzPlaceHolder="请选择数据位">
              <nz-option nzValue="8" nzLabel="8"></nz-option>
              <nz-option nzValue="7" nzLabel="7"></nz-option>
              <nz-option nzValue="6" nzLabel="6"></nz-option>
              <nz-option nzValue="5" nzLabel="5"></nz-option>
            </nz-select>
          </div>
        </div>
        <div class="form-group row">
          <label for="stopBits" class="col-sm-2 col-form-label">停止位</label>
          <div class="col-sm-10">
            <nz-select style="width: 120px;" id="stopBits" name="stopBits" [compareWith]="compareFn" [(ngModel)]="openOption.stopBits"
              nzAllowClear nzPlaceHolder="请选择停止位">
              <nz-option nzValue="1" nzLabel="1"></nz-option>
              <nz-option nzValue="2" nzLabel="2"></nz-option>
            </nz-select>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-sm-10">
            <button type="button" class="btn btn-primary" (click)="doConnect()">连接</button>
          </div>
        </div>
      </form>
    </div>
    <div class="col-8">
      <app-hex-editor></app-hex-editor>
      <div class="row"><textarea style="width:100%" rows="15">{{rcvData}}</textarea></div>
      <div class="row"><textarea style="width:100%" rows="5" [(ngModel)]="sendData"></textarea><button (click)="send()">发送</button></div>
    </div>
  </div>
</div>